<template>
    <fieldset>
        <legend>App组件显示</legend>
        <Todoinput @add="addTodo"></Todoinput>
        <Todolist :data="newData" @del="delTodo"
         @getFlag="handleGetFlag" :allCount="allCount"
         :completedCount="completedCount" :activeCount="activeCount"
         ></Todolist>
       
    </fieldset>
</template>
<script setup>
import { ref,computed } from 'vue';
import Todoinput from './todoinput.vue';
import Todolist from './todolist.vue';

let data =ref(
    [
        {
            id:1,
            todo:"雪鹰领主",
            isCompleted:true,
        },
        {
            id:2,
            todo:"虚空火莲花,分身术，",
            isCompleted:true,
        },
        {
            id:3,
            todo:"虚界幻境，美如画",
            isCompleted:true,
        },
    ])

let addTodo = (input)=>{
    // console.log('11111');
    console.log(input);
  
    data.value.push(input)
}
// 删除
let delTodo =(input)=>{
    console.log(input);
    data.value.splice(input,1) //input ==i
}

// 筛选

let filterFlag =ref('all')
let handleGetFlag=flag=>{
    console.log(flag);
    filterFlag.value=flag
}


    let allCount =ref(0)
    let completedCount =ref(0)
    let activeCount =ref(0)
// 处理数据
let newData=computed(()=>{


    let all=data.value
    let completed =data.value.filter(item=>item.isCompleted);
    let active =data.value.filter(item=>!item.isCompleted);

   
    allCount.value=all.length
    completedCount.value=completed.length
    activeCount.value=active.length

   

    switch(filterFlag.value){
        case 'all'://全选
        return all;
        case 'completed'://已完成
        return completed
        case 'active'://未完成
        return active
    }
   

})
</script>






<!-- 

    1.列表展示
    2.增加功能
    3.删除功能
    4.选中与未选中
    5.展示数量
    6.永久存储
 -->